<template>
    <div>
        <div class="img" >
            <tailoring></tailoring>
        </div>


        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
            <el-form-item label="电话" prop="phone"><el-input v-model="ruleForm.phone"></el-input></el-form-item>
            <el-form-item label="密码" prop="password"><el-input placeholder="请输入密码" v-model="ruleForm.password" show-password></el-input></el-form-item>
            <el-form-item label="单位" prop="company">
                <el-select v-model="ruleForm.company" placeholder="请选择单位">
                    <el-option v-for="c in companys" :label="c" :value="c">{{ c }}</el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="status"><el-switch v-model="ruleForm.status"></el-switch></el-form-item>
            <el-form-item label="专业领域" prop="specialty">
                <el-checkbox-group v-model="ruleForm.specialty">
                    <el-checkbox v-for="s in specialtys" :label="s" name="type">{{ s }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="会员编号" prop="numberCard">
                <el-input v-model="ruleForm.numberCard">
                    <template slot="prepend">
                        001000-
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import tailoring from './Tailoring.vue'
    export default {
        name: 'ceshi',
        components:{
            tailoring
        },
        data() {
            return {
                companys: ['济南市中心医院', '齐鲁医院', '山大二院'],
                specialtys: ['儿科', '神经内科', '皮肤科', '消化科'],

                ruleForm: {
                    name: '',
                    sex: '男',
                    phone: '',
                    password: '',
                    status: true,
                    specialty: [],
                    company: '',
                    numberCard: ''
                },
                rules: {
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    phone: [
                        { required: true, message: '手机号不能为空', trigger: 'blur' },
                        { pattern: /^[1][3578]\d{9}$/, message: '请输入正确的手机号' }],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '长度至少为8，至少含有一个字母和一个数字' }
                    ],

                    specialty: [{ type: 'array', required: true, message: '请至少选择一个专业领域', trigger: 'change' }],
                    company: [ { required: true, message: '请选择工作单位', trigger: 'change' }],
                    numberCard: [
                        { required: true, message: '会员编号不能为空', trigger: 'blur' },
                        { pattern: /^[0-9]\d{5}$/, message: '会员编号为六位数字' },
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        console.log(this.ruleForm);

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            selectPhotos(){

            },
        }
    };
</script>

<style>
    .demo-ruleForm {
        width: 60%;
    }
    .el-form-item__content {
        text-align: left;
    }
</style>
